<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锁扫描</title>
    <!-- 引入Vue.js -->
    <script src="/static/cdn/http_unpkg.com_vue@3_dist_vue.global.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_dayjs.min.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_customParseFormat.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_weekday.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_localeData.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_weekOfYear.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_weekYear.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_advancedFormat.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_quarterOfYear.js"></script>
    <script src="/static/cdn/http_cdn.jsdelivr.net_npm_ant-design-vue@4.2.1_dist_antd.min.js"></script>
    <link rel="stylesheet" href="/static/cdn/http_cdn.jsdelivr.net_npm_ant-design-vue@4.2.1_dist_reset.css">
    <script src="/static/cdn/axios.js"></script>

</head>
<body>
<div id="app" style="background-color: #eeeeee;margin-left: 20px;margin-right: 20px;">

    <a-row align="middle" justify="start" justify="space-evenly" :gutter="16" style="padding: 20px;">
        <a-col :span="4">
            <div class="container" @click="doScanLock()">开始扫描锁</div>
        </a-col>
<!--        <a-col :span="4">-->
<!--            <div class="container" @click="doScanLock()">阅读文档</div>-->
<!--        </a-col>-->

    </a-row>

    <a-row align="middle" justify="start" style="background-color: white;">
        <a-col :span="24" v-for="(item, index) in resData.scanLock" style="margin-top: 2px;">
            锁ID: <a-tag color="#2db7f5">{{ item.lockId }}</a-tag>
            流程名称: <a-tag color="#2db7f5">{{ item.processName }}</a-tag>
            加锁时间:  <a-tag color="#2db7f5">{{ item.lockTimeStr }}</a-tag>
            锁定时长:  <a-tag color="#2db7f5">{{ item?.alreadyLockedMinutes }}分钟</a-tag>
            <a-button v-if="item?.alreadyLockedMinutes > 10" type="primary" size="small" @click="doUnLock(item.lockId)">解锁</a-button>
        </a-col>
    </a-row>
</div>

<script>
    const {createApp, ref, reactive, toRefs,} = Vue;
    const {message, DownloadOutlined} = window.antd;

    // 创建Vue实例
    const vueApp = {
        setup() {
            const resData = reactive({
                scanLock: [
                ]
            });

            const selectedKeys1 = ref(['2']);
            const headerStyle = {
                textAlign: 'left',
                height: '5vh',
                paddingInline: 50,
                lineHeight: '64px',
                backgroundColor: '#fff',
            };
            const contentStyle = {
                textAlign: 'center',
                minHeight: '95vh',
                lineHeight: '120px',
                color: '#fff',
                backgroundColor: '#eeeeee',
            };

            const doScanLock = () => {
                axios.get("/workflow/scanLock")
                    .then(res => {
                        if (res.data.code === 1) {
                            resData.scanLock = res.data.data;
                            console.log(resData.scanLock);
                            message.success('扫描完成!');
                        } else {
                            message.warning(res.data.message);
                        }
                    }).catch(function (error) {
                    message.error(error.data.message);
                    console.log(error)
                });
            }

            const doUnLock = (lockId) => {
                axios.post("/workflow/doUnLock/" + lockId,{lockId: lockId})
                    .then(res => {
                        if (res.data.code === 1) {
                            doScanLock();
                            message.success('解锁成功!');
                        } else {
                            message.warning(res.data.message);
                        }
                    }).catch(function (error) {
                    message.error(error.data.message);
                    console.log(error)
                });
            }

            return {
                headerStyle,
                contentStyle,
                selectedKeys1,
                doScanLock,
                doUnLock,
                resData,
            }
        }
    };
    // 挂载Vue实例到DOM元素
    createApp(vueApp)
        .use(antd)
        .mount('#app');


</script>
<style>
    .container {
        display: flex;
        background-color: white;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 50px; /* 容器高度 */
        cursor: pointer;
        border-radius: 10px; /* 圆角 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 阴影 */
        transition: all 0.3s ease; /* 过渡 */
    }

    .container:hover {
        background-color: #42a5f5; /* 暗绿色背景 */
        font-weight: bold;
    }
</style>
</body>
</html>
